<template>
  <div class="container">
    <div class="title_bar">
      <div class="main_title">销量统计表</div>
      <div class="sub_title">1901 - 1914 服装销量统计表</div>
      <slot name="title"></slot>
    </div>
    <div id="line_basic" style="width: 100%"></div>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
export default {
  data() {
    return {
      chart: null,
      dataList: [
        { year: "1901 年", type: "衣服", nums: 7 },
        { year: "1901 年", type: "裤子", nums: 3.9 },
        { year: "1902 年", type: "衣服", nums: 6.9 },
        { year: "1902 年", type: "裤子", nums: 4.2 },
        { year: "1903 年", type: "衣服", nums: 9.5 },
        { year: "1903 年", type: "裤子", nums: 5.7 },
        { year: "1904 年", type: "衣服", nums: 10.2 },
        { year: "1904 年", type: "裤子", nums: 6.3 },
        { year: "1905 年", type: "衣服", nums: 11.4 },
        { year: "1905 年", type: "裤子", nums: 7.2 },
        { year: "1906 年", type: "衣服", nums: 13.2 },
        { year: "1906 年", type: "裤子", nums: 8 },
        { year: "1907 年", type: "衣服", nums: 14.2 },
        { year: "1907 年", type: "裤子", nums: 10.2 },
        { year: "1908 年", type: "衣服", nums: 14.8 },
        { year: "1908 年", type: "裤子", nums: 11.3 },
        { year: "1909 年", type: "衣服", nums: 15.4 },
        { year: "1909 年", type: "裤子", nums: 13.6 },
        { year: "1910 年", type: "衣服", nums: 14.1 },
        { year: "1910 年", type: "裤子", nums: 14.8 },
        { year: "1911 年", type: "衣服", nums: 13.2 },
        { year: "1911 年", type: "裤子", nums: 15.6 },
        { year: "1912 年", type: "衣服", nums: 12.4 },
        { year: "1912 年", type: "裤子", nums: 16.2 },
        { year: "1913 年", type: "衣服", nums: 13.6 },
        { year: "1913 年", type: "裤子", nums: 15.8 },
        { year: "1914 年", type: "衣服", nums: 12.4 },
        { year: "1914 年", type: "裤子", nums: 14.2 },
      ],
    };
  },
  mounted() {
    this.chart = new Chart({
      // 指定图表容器 ID
      container: "line_basic",
      autoFit: true,
      height: 500,
      padding: [40, 80, 80, 80],
    });

    this.chart.data(this.dataList);

    // 设置度量
    this.chart.scale({
      year: {
        range: [0, 1],
      },
      nums: {
        nice: true,
        alias: "销售量",
      },
    });

    this.chart.tooltip({
      // 是否显示 tooltips 辅助线。
      showCrosshairs: true,
      // true 表示合并当前点对应的所有数据并展示，false 表示只展示离当前点最逼近的数据内容。
      shared: true,
    });

    this.chart.axis("nums", {
      label: {
        formatter: (val) => {
          return val + "万件";
        },
      },
      title: {
        style: {
          fontSize: 16, // 文本大小
          textAlign: "center", // 文本对齐方式
        },
        offset:60
      },
    });
    
    // 如果不希望用图例就传 false
    // this.chart.legend(false);

    // 设置图例
    this.chart.legend({
      position: "bottom",
    });

    // // 自定义图例不太清楚怎么关联线，先放着，设置 removeInteraction 让他不能交互
    // this.chart.legend({
    //   custom: true,
    //   items: [
    //     { name: '衣服', value: 'nums', marker: { symbol: 'bowtie', style: { stroke: '#1890ff', lineWidth: 2 } } },
    //     { name: '裤子', value: 'nums', marker: { symbol: 'bowtie', style: { stroke: '#2fc25b', lineWidth: 2 } } },
    //   ],
    // });
    // // 如果只希望显示图例不希望有点击交互设置 removeInteraction
    // this.chart.removeInteraction('legend-filter'); 

    this.chart.line().position("year*nums").color("type").shape("smooth");
    this.chart.point().position("year*nums").color("type").shape("circle");
    this.chart.render();

  },
  watch: {
    dataList(newValue) {
      this.chart.changeData(newValue);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .title_bar {
    width: 100%;
    margin-bottom: 20px;
    .main_title {
      width: 100%;
      text-align: center;
      font-size: 40px;
      color: #333333;
    }
    .sub_title {
      width: 100%;
      text-align: center;
      font-size: 28px;
      margin-top: 18px;
      color: #999999;
    }
  }
}
</style>